I have a textarea, which I am trying to insert tabs of the same size into.
As you can see in the example, the only difference in each line of the testString is the position of the \t.
However, in the resulting textarea, the size of the tabs are different, seemingly dependent on how many characters are in front of it. This causes text after the tab to not be aligned properly.
In my perfect world, all of the 5s in the textarea would be aligned vertically, since each line is technically the same (five characters + one tab)
I am aware of the CSS property tab-size, and though this indeed changes the size of tabs, the resulting tab size in the textarea is still based on how many characters are in front of it.
I don't want to insert spaces rather than tabs, because I want a single backspace/delete to remove the entire tab, but if someone enters multiple spaces in succession, I would like backspace/delete to only clear single spaces as per usual.
Is there something that I am missing? Are there any workarounds to achieve this? My research has returned no helpful results, so I am now reaching out here.
Thanks for your help.
testString = '1\t2345' + '\n' + '12\t345' + '\n' + '123\t45' + '\n' + '1234\t5'
document.getElementById('text').value = testString<textarea cols="10" rows="4" id="text"></textarea>You can get close to the requested outcome in case your use-case is in fact just having single type of "wide general white-space separators" that are not aligned at tab stops in your textarea. CSS white-space: pre-line strips tabs their "tab-stops" obeying behaviour and makes all spaces and tabs collapse to single words separating unit. Width of these "units" can be adjusted with word-spacing:
<p contenteditable role="textbox"
style="
white-space: pre-line;
word-spacing: 1em;
font-family: monospace, monospace;
">
4×Space:
1 2345
12 345
123 45
1234 5
1×Space:
1 2345
12 345
123 45
1234 5
1×Tab:
1 2345
12 345
123 45
1234 5
» « (ensp)
» « (emsp)
»　« (IDEOGRAPHIC)
» « (space)
»	« (tab)
</p>As demonstrated, it works for given example. Drawbacks are that:
  instead (see bottom of above snippet).Edit: realized that using contenteditable instead of textarea brings few extra aspects (own different drawbacks) into play, especially with regard to inserting white space. Here is same styling applied to real textarea to try editing experience with drawbacks described earlier:
<textarea rows="25"
style="
white-space: pre-line;
word-spacing: 1em;
font-family: monospace, monospace;
">
4×Space:
1 2345
12 345
123 45
1234 5
1×Space:
1 2345
12 345
123 45
1234 5
1×Tab:
1 2345
12 345
123 45
1234 5
» « (ensp)
» « (emsp)
»　« (IDEOGRAPHIC)
» « (space)
»	« (tab)
</textarea>